/**
 * @description  因子风险贡献
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { SecondHeaderC, TableC } from '../../../../comps';

class FactorRiskContribution extends PureComponent {
  constructor() {
    super();
    this.state = {
      tableData: {
        data1: { columns: undefined, dataSource: undefined },
        data2: { columns: undefined, dataSource: undefined },
      },
      columns1: [
        {
          title: '行业因子',
          key: 'factor',
        },
        {
          title: '风险贡献',
          key: 'risk_contribution',
        },
      ],
      columns2: [
        {
          title: '风格因子',
          key: 'factor',
        },
        {
          title: '风险贡献',
          key: 'risk_contribution',
        },
      ],
    };
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    this.getData(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch, args, timeStamp } = nextProps;
    if (JSON.stringify(timeStamp) !== JSON.stringify(this.props.timeStamp)) {
      this.setState({ tableData: { data1: { columns: undefined, dataSource: undefined }, data2: { columns: undefined, dataSource: undefined } } });
      this.getData(args);
    }
  }

  getData = (args) => {
    this.props.dispatch({
      type: 'riskAttributionM/getFactorContributionDetail',
      payload: args,
      callback: (res) => {
        if (res) {
          res.data['data1']['columns'] = this.state.columns1;
          res.data['data2']['columns'] = this.state.columns2;
          this.setState({ tableData: res.data });
        } else {
          let tableData = this.state.tableData;
          tableData['data1']['columns'] = this.state.columns1;
          tableData['data2']['columns'] = this.state.columns2;
          this.setState({
            tableData: { ...tableData },
          });
        }
      },
    });
  };

  showTable = (data) => {
    const { columns = [], dataSource } = data || {};

    const newColumns = columns.map((x) => {
      if (['factor'].indexOf(x.key) > -1) {
        return {
          ...x,
        };
      }
      if (['risk_contribution'].indexOf(x.key) > -1) {
        return {
          ...x,
          type: 'rate',
          toFixed: 4,
          width: '50%',
          sorter: (a, b) => a.risk_contribution - b.risk_contribution,
        };
      }

      return x;
    });
    const style = {
      width: '50%',
      textAlign: 'right',
    };
    const arr = dataSource?.concat();
    const item = arr?.pop();
    return (
      <div>
        <TableC columns={newColumns} dataSource={arr} scroll={{ y: 400 }} hidePage={true} rowKey='factor'></TableC>
        {arr?.length > 0 && (
          <div className='ant-table' style={{ width: 'calc(100% - 8px)' }}>
            <div className='ant-table-tbody'>
              <tr className='ant-table-row' style={{ display: 'flex', fontWeight: 600 }}>
                <td style={{ flex: 1 }}>{item?.factor || '--'}</td>
                <td style={style}>{item?.risk_contribution ? `${(item?.risk_contribution * 100).toFixed(4)}%` : '--'}</td>
              </tr>
            </div>
          </div>
        )}
      </div>
    );
  };

  render() {
    const { tableData = {} } = this.state;
    const { data1, data2 } = tableData;
    return (
      <div>
        <Row gutter={16}>
          <Col span={12}>
            <SecondHeaderC title='风格因子' />
            <div style={{ marginTop: '10px' }}>{this.showTable(data2)}</div>
          </Col>
          <Col span={12}>
            <SecondHeaderC title='行业因子' />
            {this.showTable(data1)}
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ riskAttributionM }) => ({
  riskAttributionM,
}))(FactorRiskContribution);
